<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        <!-- 不需要编译就执行的指令，通常用于加载静态资源 -->
        <div>{{msg}}</div>
        <!-- 只绑定一次 -->
        <!-- <div v-once>{{msg}}</div> -->

        <!-- v-model:只能用于表单元素：input,textarea,radio，checkbox，select下拉框 -->

        <!-- input输入 -->
        <input type="text" v-model="msg" />

        <!-- 单选 -->
        <!-- 提取数据到状态中 -->
        <p>{{sex}}</p>

        <!-- v-bind:绑定数据   : -->

        <label v-for="obj in info"><input :type="obj.type" :name="obj.name" v-bind:value="obj.value" v-model="sex" />{{obj.label}}</label>
        <!-- <label><input type="radio" name="sex" value="男" v-model="sex" />男</label>
        <label><input type="radio" name="sex" value="女" v-model="sex" />女</label>
        <label><input type="radio" name="sex" value="未知" v-model="sex" />未知</label> -->

        <!-- type,name,value,v-model="", label -->


        <!-- 多选 -->
        <p>{{fruit.join(",")}}</p>
        <label><input type="checkbox" name="fruits" value="banana" v-model="fruit" />香蕉</label>
        <label><input type="checkbox" name="fruits" value="apple" v-model="fruit" />苹果</label>
        <label><input type="checkbox" name="fruits" value="orange" v-model="fruit" />橘子</label>


        <!-- 下拉框 -->
        <p>{{lang}}</p>
        <select v-model="lang">
            <option value="">--请选择--</option>
            <option value="Java">Java</option>
            <option value="C#">C#</option>
            <option value="Python">Python</option>
        </select>

        <!-- textarea -->
        <br />

        <span>{{text}}</span>
        <br />
        <textarea cols="30" rows="10" v-model="text"></textarea>



    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({

            data: function () {
                return {
                    msg: "hello world!!!",
                    sex: "",
                    fruit: [],
                    lang: "",
                    text: "",
                    info: [
                        {
                            type:"radio",
                            name:"sex",
                            value:"男",
                            label:"男"

                        }, 
                        {
                            type:"radio",
                            name:"sex",
                            value:"女",
                            label:"女"

                        }, 
                        {
                            type:"radio",
                            name:"sex",
                            value:"未知",
                            label:"未知"

                        }, 
                       ],

                }
            }
        }).mount('#div');
    </script>

</body>

</html>